<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		     功能:1.应用于表格中单元格[栅格布局]
			 2.行内元素与行内块元素对齐方式
			 理解:文本和图片对齐方式[垂直居中]
	   元素种类:
			   行内元素:典型行内元素 span,a,文本
			       特点:在一行内显示,不可以设置宽高
			   块级元素:典型块级元素 div,p,
			       特点:独占一行,可以设置宽高
			   行内块元素:典型行内块元素 img
			         特点:在一行内显示,可设宽高
				     页面组成:元素之间嵌套生成
					 三种元素相互嵌套  √  嵌套根据元素特点页面混乱
			嵌套条件1:在一行内显示
					块套行    √ 推荐
					行套行    √
					行套块    √  增加条件,块添加宽高,造成页面布局混乱  ×
					块套块    √
			嵌套条件2:独占一行[效果]
			         块套行    √ 推荐
			         行套行    ×
			         行套块    × 混乱
			         块套块    √
			 -->
			<style>
				/* 抓每个img 
				派生(后代)选择器:
				特点:抓取父元素中所有(后代)子元素[元素嵌套特点
				伪类选择器:
				特点:在选择器后,过滤符合特定条件某个元素
				nth-child:选中父类元素中第N个
				符合条件:p中包含4个img 
				id抓取父元素：空间大
				class抓取父元素中某个子元素：微调*/
				
				i mg:nt h-child(1){
					border: 10px solid red;
				}
				i mg:nth -child(2){
					border: 10px solid #ff0;
				}
				/* 标准抓取每个img方案 */
				p img.baseline{
					vertical-align: baseline;
				}
				p img.top{
					vertical-align: top;
				}
				p img.middle{
					vertical-align: middle;
					/* vertical-align: 与text-align区别：
					 1.属性值不同
					 2.前者控制文本和图片垂直问题，后者控制文本左右和居中以及两边对齐*/
				}
				p img.bottom{
					vertical-align: bottom;
				}
			</style>		
	</head>
	<body>
		<div><span>111</span></div>
		<h1>垂直方向属性的使用[针对元素的种类]</h1>
		<p>图图<img class="baseline" src="img/图图.png" alt="图图" width="250px" height="250px">基线对齐</p>
		<p>拜年<img class="top" src="img/拜年.png" alt="拜年" width="250px" height="250px">顶部对齐</p>
		<p>懒洋洋<img class="middle" src="img/懒洋洋.png" alt="懒洋洋" width="250px" height="250px">中间对齐</p>
		<p>太乙真人<img class="bottom" src="img/太乙真人png.png" alt="太乙真人" width="250px" height="250px">底部对齐</p>
		<!-- 需求:垂直方向属性  4个属性值
		          如果不改变现有html结构,可以找到依次4个img
				  抓每个---4个图片
			思路:派生选择器+伪类选择器
			     -->
	</body>
</html>